<template>
  <a-row>
    <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
      <v-charts :options="options"  style="width:100%;height:400px" autoresize />
    </a-col>
    <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
      <rank-list title="横向课题完成率排名" :list="rankList" :height="300"/>
    </a-col>
  </a-row>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title.js'
import 'echarts/lib/component/markLine'
import RankList from '@/components/chart/RankList'
import { getAction } from '@api/manage'
export default {
  name: "SchoolResearchHorizontalProjectAndTraining",
  components:{
    'v-charts': ECharts,RankList
  },
  props: {
    date: {
      type: String,
      default: () => []
    }
  },
  data(){
    let config = {
      rotate: 90,
      align: 'left',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15
    }
    let labelOption = {
      show: true,
      position: config.position,
      distance: config.distance,
      align: config.align,
      verticalAlign: config.verticalAlign,
      rotate: config.rotate,
      formatter: '{c}',
      fontSize: 16,
      rich: {
        name: {
        }
      }
    }

    return {
      rankList:[
        {name:'智能制造学院' , total:'220%'},
        {name:'人工智能学院' , total:'120%'},
        {name:'汽车工程学院' , total:'100%'},
        {name:'机械工程学院' , total:'90%'},
        {name:'电子信息学院' , total:'80%'},
        {name:'计算机与软件学院' , total:'80%'},
        {name:'化学工程学院' , total:'80%'},
        {name:'建筑与热能工程学院' , total:'80%'},
        {name:'经济管理学院' , total:'70%'},
        {name:'艺术与设计学院' , total:'60%'},
        {name:'基础课部' , total:'50%'},
        {name:'马克思主义学院' , total:'40%'},
        {name:'军事体育部' , total:'30%'}
      ],
      rankList2:[

        {name:'建筑与热能工程学院' , total:'80%'},
        {name:'经济管理学院' , total:'70%'},
        {name:'艺术与设计学院' , total:'60%'},
        {name:'基础课部' , total:'50%'},
        {name:'马克思主义学院' , total:'40%'},
        {name:'军事体育部' , total:'30%'}
      ],
      options:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['目标到款额', '实际到款额','目标培训人数','实际培训人数']
        },

        grid:{
          show: true,
          bottom:'25%'
        },
        xAxis: [
          {
            axisLabel:{
              interval: 0,
              rotate: 45
            },
            type: 'category',
            axisTick: {show: false},
            data:['智能制造学院', '人工智能学院', '汽车工程学院', '机械工程学院', '电子信息学院', '计算机与软件学院', '化学工程学院', '建筑与热能工程学院', '经济管理学院', '艺术与设计学院', '基础课部', '马克思主义学院', '军事体育部']
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '到款额',
            min:0
          },
          {
            type: 'value',
            scale: true,
            name: '培训人数',
            min:0
          }
        ],
        series: [
          {
            name: '目标到款额',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            yAxisIndex: 0,
            color:'#81C462',
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390,320, 332, 301, 334, 390,332, 301, 334]
          },
          {
            name: '实际到款额',
            type: 'bar',
            label: labelOption,
            yAxisIndex: 0,
            color:'#62B3D6',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290,220, 182, 191, 234, 290,220, 182, 191]
          },
          {
            name: '目标培训人数',
            type: 'line',
            smooth: true,
            barGap: 0,
            yAxisIndex: 1,
            color:'#F8BE47',
            data: [1200, 1500, 1301, 1334, 2390,1320, 1332, 1301, 2334, 1390,2332, 1301, 1334]
          },
          {
            name: '实际培训人数',
            type: 'line',
            smooth: true,
            barGap: 0,
            yAxisIndex: 1,
            color:'#E74D53',
            data: [1320, 1332, 2301, 2334, 1390,1320, 1332, 2301, 2334, 1390,1332, 1301, 1334]
          }
        ]
      }
    }
  },
  created() {
    console.log("created")
    this.loadData();
  },
  watch:{
    date: function (){
      this.loadData();
    }
  },
  methods: {
    loadData: function (){
    //   console.log(this.url.classTimeProportion)
    //   getAction(this.url.classTimeProportion, { date: this.date}).then((res) => {
    //     if (res.success) {
    //       console.log(res.result);
    //       this.options.series[0].data = res.result.proportions;
    //       console.log(this.options.series.data);
    //       this.options.graphic.elements[1].style.text = res.result.total;
    //       console.log(this.options);
    //     }
    //     // console.log(this.options)
    //     if(res.code===510){
    //       this.$message.warning(res.message)
    //     }
    //     this.loading = false;
    //   })
    }
  },
}
</script>

<style scoped>

</style>